<template>
  <el-dialog :title="editOrAdd" :visible="isShow" @close="onCancle">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
      <el-form-item prop="name" label="部门名称" label-width="120px">
        <el-input v-model.trim="ruleForm.name" style="width: 80%;" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码" label-width="120px">
        <el-input v-model.trim="ruleForm.code" style="width: 80%;" placeholder="请输入部门编码" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人" label-width="120px">
        <el-select v-model="ruleForm.manager" style="width: 80%;" placeholder="请选择" @focus="onSelect">
          <el-option v-for="el in employeeList" :key="el.id" :label="el.username" :value="el.username" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" style="width: 80%;" label="部门介绍" label-width="120px">
        <el-input v-model.trim="ruleForm.introduce" style="width: 80%;" type="textarea" :rows="3" placeholder="3-300个字符" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onCancle">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDepartmentsAPI, addDepartmentsAPI, getEmployeeSimpleAPI, acdIdGetDeptsAPI, updateDeptsAPI } from '@/api'
export default {
  name: 'AddDeptsPop',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    deptsObj: {
      type: Object,
      required: true
    }
  },
  data() {
    const checkDeptsName = async(rule, value, callback) => {
      // 这里不在校验函数中调用接口是因为在校验后会有延迟，而在created中调用则不会有这个问题
      // const { depts } = await getDepartmentsAPI()
      let isRepeat = false
      if (this.ruleForm.id) {
        isRepeat = this.depts.filter(el => el.pid === this.deptsObj.pid && el.id !== this.deptsObj.id).some(el => el.name === value)
      } else {
        isRepeat = this.depts.filter(el => el.pid === this.deptsObj.id).some(el => el.name === value)
      }
      isRepeat ? callback(new Error('同级部门名称不能重复')) : callback()
    }
    const checkDeptsCode = async(rule, value, callback) => {
      // 这里不在校验函数中调用接口是因为在校验后会有延迟，而在created中调用则不会有这个问题
      // const { depts } = await getDepartmentsAPI()
      let isRepeat = false
      if (this.ruleForm.id) {
        isRepeat = this.depts.filter(el => el.id !== this.deptsObj.id).some(el => el.code === value && value)
      } else {
        isRepeat = this.depts.some(el => el.code === value && value)
      }
      isRepeat ? callback(new Error('同级部门编码不能重复')) : callback()
    }
    return {
      ruleForm: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          { validator: checkDeptsName, trigger: 'blur' }],
        code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          { validator: checkDeptsCode, trigger: 'blur' }],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 3, max: 300, message: '部门介绍要求3-300个字符' }]
      },
      depts: [],
      employeeList: []
    }
  },
  computed: {
    editOrAdd: {
      set() {

      },
      get() {
        return this.ruleForm.id ? '编辑部门' : '添加部门'
      }
    }
  },
  async created() {
    const { depts } = await getDepartmentsAPI()
    this.depts = depts
  },
  methods: {
    onConfirm() {
      this.$refs.ruleForm.validate(async isOk => {
        if (isOk) {
          if (this.ruleForm.id) {
            await updateDeptsAPI(this.ruleForm)
          } else {
            await addDepartmentsAPI({ ...this.ruleForm, pid: this.deptsObj.id })
          }
          this.$emit('updateDepts')
          this.$emit('update:isShow', false)
        }
      })
    },
    async onSelect() {
      this.employeeList = await getEmployeeSimpleAPI()
    },
    onCancle() {
      this.ruleForm = this.$options.data().ruleForm
      this.$emit('update:isShow', false)
      this.$refs.ruleForm.resetFields()
    },
    async onEditDepts(id) {
      this.ruleForm = await acdIdGetDeptsAPI(id)
    }
  }
}
</script>

<style>

</style>
